<script setup lang='ts' name="acceptance-info">
import type { FormInstance } from 'element-plus'

import { updatePrivileges } from '@fl/api/iam-api'
import { SearchTable } from '@fl/components'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElMessage } from 'element-plus'
import { ref, toRefs } from 'vue'

import { useTable } from './hooks/use-table'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
}>(), {
    data: () => { },
})

const emits = defineEmits(['update:modelValue', 'confirm'])

const { gridOptions } = useTable()

const { data, modelValue } = toRefs(props)
const state = { code: '', description: '', display_name: '', group_name: '', module_name: '' }
const form = ref<any>({ ...state })
const detail = ref<any>({})

const formRef = ref()
const tableRef = ref()

function close(formEl: FormInstance | undefined) {
    formEl && formEl.resetFields()
    emits('update:modelValue', false)
}

async function init() {
    console.log(55, data.value)

    gridOptions.data = [
        {
            code: '支付',
            count: 0,
        },
        {
            code: '接单',
            count: 100,
        },
    ]
}
init()
</script>

<template>
    <el-dialog v-model="modelValue"
               width="1200"
               :close-on-click-modal="false"
               title="申请验收"
               @close="close"
    >
        <div class="info-title">
            发货信息
        </div>

        <el-form :model="detail"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="预计发货时间:">
                        {{ detail.code }}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="发货说明:">
                        {{ detail.code }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="物流公司:">
                        {{ detail.code }}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="物流单号:">
                        {{ detail.code }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发货单附件:">
                        <UpdatedOss v-model="form.yingyzzurl"
                                    list-type="text"
                                    :disabled="true"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="info-title">
            商品信息
        </div>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
        >
            <template #name="{ row }">
                <span style="color:#9dc5f9">{{ row.name }}</span>
            </template>

            <template #count="{ row }">
                {{ row.count }}
                <!-- <el-input-number v-model="row.count"
                                 style="width: 100px;"
                                 :precision="0"
                                 :min="1"
                                 size="small"
                                 @change="handleChange($event, row)"
                /> -->
            </template>
        </SearchTable>

        <div class="info-title">
            验收信息
        </div>

        <el-form ref="formRef"
                 :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="验收时间"
                                  prop="code"
                    >
                        {{ detail.code }}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="发货单附件"
                                  prop="yingyzzurl"
                    >
                        <UpdatedOss v-model="form.yingyzzurl"
                                    list-type="text"
                                    accept=".png,.jpg,.jpeg,docx,.xlsx"
                                    :is-public="false"
                                    tips="只能上传jpg、jpeg、png、docx、xlsx文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="验收说明">
                        {{ detail.code }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div style="text-align: center;">
            <el-button @click="close(formRef)">
                关闭
            </el-button>
        </div>
    </el-dialog>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
}
</style>
